<!--
 * @Author: deliteam 462085920@qq.com
 * @Date: 2023-12-04 15:32:17
 * @Description: 
-->
<template>
    <div class="gallery" :class="costomCls">
        <Swiper class="swiper" :modules="modules" :space-between="0" :centered-slides="true" :navigation="true" :pagination="{
            clickable: true,
            type: 'fraction'
        }" :autoplay="false" v-bind="$attrs">
            <SwiperSlide v-for="(item, index) in imgList" :key="index">
                <div class="uncropped" v-if="!$slots.default">
                    <img :src="$picHander(item, 'zoom_large')" alt="" class="contain-image image--loaded image--full-width"
                        loading="lazy">
                    <div class="swiper-lazy-preloader"></div>
                </div>
                <template v-else>
                    <slot :item="item"></slot>
                </template>
            </SwiperSlide>
        </Swiper>
    </div>
</template>

<script setup>
import { Swiper, SwiperSlide } from 'swiper/vue'
import 'swiper/css'
import 'swiper/css/pagination'
import 'swiper/css/navigation'
import { Autoplay, Keyboard, Navigation, Pagination } from 'swiper'
const modules = ref([Pagination, Navigation, Autoplay, Keyboard])
const props = defineProps({
    imgList: {
        type: Array,
        default: []
    },
    costomCls: {
        type: String,
        default: ''
    }
});
const { $picHander } = useNuxtApp()

</script>

<style lang="scss" scoped>
.gallery {
    position: relative;
    display: block;

    :deep(.swiper) {
        overflow-y: inherit;
        overflow-x: inherit;

        .swiper-button-prev {
            position: absolute;
            z-index: 100;
            width: 50%;
            height: 100%;
            opacity: 0;
            top: 0;
            margin-top: 0;
            left: 0;
            top: 0;
            right: inherit;
            cursor: url("/icons/left.png") 0 0, auto;
        }

        .swiper-button-next {
            position: absolute;
            z-index: 100;
            width: 50%;
            height: 100%;
            opacity: 0;
            top: 0;
            margin-top: 0;
            right: 0;
            top: 0;
            left: inherit;
            cursor: url("/icons/right.png") 0 0, auto;
        }

        .swiper-pagination {
            position: absolute;
            width: 50%;
            margin: 0 auto;
            bottom: 0;
            top: 100%;
            left: 0;
            right: 0;
            padding-bottom: 5vh;
            padding-top: 5vh;
            font-family: "gilroy", Sans-Serif;
            font-size: 1.25rem;
            line-height: 1.75rem;
            font-weight: 300;
        }


    }

    &.noNavigation {
        :deep(.swiper-pagination) {
            display: none;
        }
    }
}

.swiper-arrow {
    position: absolute;
    z-index: 100;
    width: 50%;
    height: 100%;
    opacity: 0;
    top: 0;
}

.prev {
    left: 0;
    display: flex;
    justify-content: flex-start;
}

.next {
    right: 0;
    display: flex;
    justify-content: flex-end;
}



@media screen and (max-width: 768px) {
    .gallery {
        :deep(.swiper) {
            overflow-y: inherit;
            overflow-x: hidden;

            .swiper-button-prev {
                display: none;
            }

            .swiper-button-next {
                display: none;
            }

            .swiper-pagination {
                position: relative;
                padding-bottom: 0;
                padding-top: 0;
            }

            .prev {
                display: none;
            }

            .next {
                display: none;
            }
        }

    }

    .project-desc {
        font-size: 1.15rem;
        line-height: 1.5rem;
        font-weight: 300;
        width: 100%;
    }
}

.uncropped {
    text-align: center;
    position: relative;
    width: 100%;
    height: 75vh;
}

@media screen and (max-width: 767px) {
    .uncropped {
        // height: 65vh;
        height: inherit;
    }

    .project-details {
        width: 100%;
        flex-flow: column wrap;
        padding-top: 2.5vh;
        padding-bottom: 0;
        font-size: 1.125rem;
    }

    .project-name {
        width: 100%;
    }
}

.contain-image {
    display: inline-block;
    opacity: 0;
    transition: 0.5s ease opacity;
    object-fit: contain;
    object-position: 50% 50%;
    width: 100%;
    max-width: 75vw;
    height: 100%;
}

@media screen and (max-width: 767px) {
    .contain-image {
        max-width: 100%;
        padding: 20px;
    }
}

.contain-image.image--loaded {
    opacity: 1;
}
</style>
